<template>
	<div class="star" :class='starType'>
		<span v-for='itemClass in itemClasses' class="star-item" :class="itemClass"></span>
	</div>
</template>

<script type="text/ecmascript-6">
	const LENGTH = 5;
	const CLS_ON = 'on';
	const CLS_HALF = 'half';
	const CLS_OFF = 'off';
	export default{
		props:{
			score:{
				type: Number
			},
			size:{
				type: Number
			}
		},
		data(){
			return{
				
			}
		},
		computed:{
			starType(){
				return 'star-'+this.size;
			},
			itemClasses(){
				let result = [];
				let score = Math.floor(this.score*2)/2;
				let hasDecimal = score%1 != 0;
				let integer = Math.floor(score);
				for(var i=0;i<integer;i++){
					result.push(CLS_ON);
				}
				if(hasDecimal){
					result.push(CLS_HALF);
				}
				while(result.length<LENGTH){
					result.push(CLS_OFF);
				}
				return result;
			}
		}
	}
</script>

<style lang="stylus">
	@import "../../common/stylus/mixin.styl"
	.star{
		font-size: 0;
		text-align: center;
		.star-item{
			display: inline-block;
			background-repeat:no-repeat;
		}
		&.star-48{
			.star-item{
				width: 20px;
				height: 20px;
				margin-right: 22px;
				background-size: contain ;
				&:last-child{
					margin-right: 0;
				}
				/*全星*/
				&.on{
					bg-image('./assets/star48_on')
				}
				/*半星*/
				&.half{
					bg-image('./assets/star48_half')
				}
				/*无星*/
				&.off{
					bg-image('./assets/star48_off')
				}
			}
				
		}
		&.star-36{
			.star-item{
				width: 15px;
				height: 15px;
				margin-right: 6px;
				background-size: contain ;
				&:last-child{
					margin-right: 0;
				}
				/*全星*/
				&.on{
					bg-image('./assets/star36_on')
				}
				/*半星*/
				&.half{
					bg-image('./assets/star36_half')
				}
				/*无星*/
				&.off{
					bg-image('./assets/star36_off')
				}
			}
		}
		&.star-24{
			.star-item{
				width: 10px;
				height: 10px;
				margin-right: 3px;
				background-size: contain ;
				&:last-child{
					margin-right: 0;
				}
				/*全星*/
				&.on{
					bg-image('./assets/star24_on')
				}
				/*半星*/
				&.half{
					bg-image('./assets/star24_half')
				}
				/*无星*/
				&.off{
					bg-image('./assets/star24_off')
				}
			}
		}
	}
</style>